<style lang="scss" rel="stylesheet/scss">
    .info-detail {
        background: #fff;
        .con-tip {
            text-align: center;
            p.one {
                color: #222;
                font-weight: 700;
                margin-bottom: 0.5rem;
            }
            span.two {
                color: #e64340;
                border: 1px solid #e64340;
                border-radius: 0.2rem;
                line-height: 1.3rem;
                padding: 0 0.6rem;
            }
        }
        .div-content{
            .content {
                min-height: 20rem;
            }
            .to-href {
                display: flex;
                padding: 0.5rem 1rem;
                border-top: 1px solid #f5f5f5;
                border-bottom: 1px solid #f5f5f5;
                img{
                    width: 2.5rem;
                    height: 2.5rem;
                    flex:0 0 2.5rem;
                }
                p {
                    color: #e64340;
                    margin-left:0.5rem;
                    line-height: 2rem;
                }
            }
            .ask-our {
                padding: 0.5rem 1.5rem;
                text-align: center;
                color: #333;
                span.read {
                    color: #0093f9;
                    text-decoration: underline
                }
                .two-icon {
                    display: flex;
                    margin-top: 1.5rem;
                    .iconfont {
                        color: #333;
                        flex:1;
                        text-align: center;
                    }
                }
            }
        }
        .about-user {
            border-top:1px solid #eee;
            border-bottom: 1px solid #eee;
            padding: 0.4rem;
            .row {
                display: flex;
                .p-t {
                    display: flex;
                    flex:1;
                    p {
                        color: #555;
                        flex: 1;
                        line-height: 1.5rem;
                    }
                }
                .p-more {
                    flex: 0 0 5rem;
                    color: #999;
                    line-height: 1.5rem;
                    text-align: right;
                }
            }
            .user-img-list {
                margin: 0.5rem 0;
                img {
                    width: 10.7%;
                    border-radius: 50%;
                    margin-right: 2%;
                    margin-top: 0.2rem;
                    &:nth-child(8n) {
                        margin-right: 0;
                    }
                }
            }
        }
        .div-share-tip {
            padding: 0.5rem;
            text-align: center;
            color: #333;
            p {
                line-height: 1.5rem;
            }
            .s-tip {
                color: #e64340;
                border: 1px solid #e64340;
                border-radius: 0.2rem;
                line-height: 1.8rem;
                padding: 0 0.6rem;
            }
        }
        .zhu-title {
            line-height: 2rem;
            padding: 0 0.5rem;
            color: #333;
            border-top:1px solid #f5f5f5;
            p.z-txt {
                float: left;
            }
            p.z-more {
                color: #999;
                float: right;
            }
        }
        .div-tab {
            padding: 0.8rem 1rem;
        }
        .news-list {
            padding: 0.5rem 0;
            clear: both;
        }
        .fixed-botton-btn {
            display: flex;
            line-height: 40px;
            border-top: 1px solid #f5f5f5;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            background: #fff;
            z-index: 99;
            .item-btn {
                flex: 1;
                color: #333;
                text-align: center;
            }
        }
    }
</style>
<template>
    <div class="info-detail">
        <jheader title="生活服务"></jheader>
        <j-info-user></j-info-user>
        <div class="con-tip">
            <p class="font-normal-small one">点击【首页】，收藏平台，一键发布，长期有效</p>
            <span class="font-small two">阅读+10 分享+100，好友分享+100亿币，提现秒到</span>
        </div>
        <div class="div-content">
            <div class="content">
                <j-news-content v-if="infoData" :content="infoData"></j-news-content>
            </div>
            <div class="to-href">
                <img src="../../assets/user_img.jpg" alt="">
                <p class="font-normal">点击链接、进入详情、查看更多</p>
            </div>
            <div class="ask-our">
                <p class="iconfont icon-question font-normal"> 为保证您合法权利，<span class="read" @click="readme">请点击阅读</span></p>
                <div class="two-icon font-big-normal">
                    <p class="iconfont icon-chakantiezigengduojubao"> 举报</p>
                    <p class="iconfont icon-pinglun"> 聊一聊</p>
                </div>
            </div>
        </div>
        <div class="about-user">
            <div class="row">
                <div class="font-normal-small p-t">
                    <p>阅读得亿币307人</p>
                    <p>分享得亿币32人</p>
                </div>
                <p class="font-small p-more">查看更多 ></p>
            </div>
            <div class="user-img-list">
                <img v-for="item in numimg" v-bind:key="item" src="../../assets/user_img.jpg" alt="">
            </div>
        </div>
        <div class="font-normal-small div-share-tip">
            <p>分享赚钱,提现秒到</p>
            <p>1、分享信息到朋友圈，好友阅读+100亿币</p>
            <p>2、好友再次分享，你和好友都再+100亿币</p>
            <p>3、分享信息越多，好友分享越多，得亿币越多</p>
            <span class="font-small s-tip">阅读+10 分享+100，好友分享+100亿币，提现秒到</span>
        </div>
        <div class="zhu-title">
            <p class="font-big-normal z-txt">猜你喜欢</p>
            <p class="font-small z-more">查看更多 ></p>
        </div>
        <div class="news-list">
            <j-news-list></j-news-list>
        </div>
        <div class="div-tab">
            <button-tab>
                <button-tab-item selected>热门评论</button-tab-item>
                <button-tab-item><span class="vux-reddot-s">最新评论</span></button-tab-item>
            </button-tab>
        </div>
        <div style="margin-bottom:42px;">
            <j-comment-list></j-comment-list>
        </div>
        <div class="fixed-botton-btn">
            <div class="item-btn">
                <p class="iconfont icon-dianzan font-big-small">  点赞</p>
            </div>
            <div class="item-btn">
                <p class="iconfont icon-comment font-big-small"> 评论</p>
            </div>
            <div class="item-btn">
                <p class="iconfont icon-fenxiang font-big-small"> 分享</p>
            </div>
            <div class="item-btn">
                <p class="iconfont icon-icon-test font-big-small"> 电话</p>
            </div>
        </div>
    </div>
</template>

<script>
    import jheader from "components/Header"
    import jInfoUser from "components/Header/InfoUser"
    import jNewsContent from "components/NewsContent"
    import jNewsList from "components/NewsContent/NewsList"
    import jCommentList from "components/NewsContent/CommentList"
    import { ButtonTab, ButtonTabItem, Alert, AlertModule } from 'vux'
    import DetailService from 'services/DetailService'
    function a() {
        let arr = []
        for(let a=1;a<17;a++){
            arr.push(a)
        }
        return arr
    }
    export default {
        components: {
            jheader,
            jInfoUser,
            jNewsContent,
            jNewsList,
            jCommentList,
            ButtonTab,
            ButtonTabItem,
            Alert
        },
        data () {
            return {
                currentTab:1,
                numimg: a(),
                infoData:{a:1}
            }
        },
        mounted () {
            this.$fetch('/index.php',{act:'unitary_advert',op:'adver_detail',id:'10356'}).then((response) => {
                this.infoData = response.datas
            })
        },
        methods: {
            clickTab(tab) {
                this.currentTab = tab
            },
            readme() {
                xmview.showAlert('温馨提示','亿家世宝仅向注册用户和非注册用户提供平台服务，亿家世宝平台上的信息系用户自行发布，由于海量信息的存在及现有技术原因，亿家世宝无法杜绝可能存在的风险和瑕疵。您应谨慎判断确定相关信息的真实性、合法性和有效性，并注意保留相应的证据以利于维权。如可能，尽量采用网站建议的交易方式进行。<span style="color:#f00">亿家世宝不对信息的真实性，准确性，有效性和安全性负责。</span>')
            }
        }
    }
</script>

